<template>
    <div class="toggle-switch" @click="toggle">
        <!-- <div class="switch" :style="switchStyle"></div> -->
        <div class="switch" :class="{ 'on': isOn }"></div>
    </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
    name: 'ToggleSwitch',
    emits: ['switchToggle'],  // 声明组件会发出的事件
    setup(props, { emit }) {  // 添加 emit 参数
        const isOn = ref(true);

        const getImageUrl = (imageName) => {
            const publicPath = __webpack_public_path__ || '/';
            return `${publicPath}assets/${imageName}`;
        };

        const switchStyle = computed(() => ({
            // backgroundImage: `url(${getImageUrl(isOn.value ? 'bottom-switch-on.png' : 'bottom-switch-off.png')})`,
        }));

        const toggle = () => {
            isOn.value = !isOn.value;
            console.log('ToggleSwitch: toggle called, new state:', isOn.value);  // 添加日志
            emit('switchToggle', isOn.value);  // 发出事件
        };

        return {
            isOn,
            toggle,
            switchStyle
        };
    }
};
</script>

<style scoped>
.toggle-switch {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    /* 防止文本被选中 */
}

.switch {
    width: 60px;
    height: 120px;
    background-image: url('../assets/bottom-switch-off.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s;
    /* 移除默认的按钮形状 */
    border: none;
    border-radius: 0;
}

.switch.on {
    background-image: url('../assets/bottom-switch-on.png');
}

span {
    margin-left: 10px;
    font-size: 12px;
}
</style>